<template>
  <view class="brand-item content">
    <view class="header" @click="clickHandler(brandData.id)">
      <div class="left">{{ brandData.brandName }}</div>
      <div class="radio" :class="selectId == brandData.id ? 'select' : ''"></div>
    </view>

    <view class="interval" v-if="disPlayChidren.length"></view>

    <view class="shops" :style="{ height: containerHeight + 'px' }" v-if="disPlayChidren.length">
      <view class="item" v-for="(item, index) in disPlayChidren" :key="index" @click="clickHandler(item.shop.id)">
        <text class="name">{{ item.shop.shopName }}</text>
        <div class="radio_wrap">
          <div class="radio" :class="selectId == item.shop.id ? 'select' : ''"></div>
        </div>
      </view>
    </view>
    <view v-if="disPlayChidren.length && data.shopList.length > 2" class="toggle_btn" @click="toggleExpand">
      <text class="text">{{ isExpanded ? '收起' : '展开' }}</text>
      <image class="arrow" :class="isExpanded ? 'up' : ''" src="/static/icon/arrow.png" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed, getCurrentInstance, nextTick, onMounted } from 'vue';

  const props = defineProps({
    data: Object,
    selectId: Number,
  });

  const instance = getCurrentInstance();

  const emits = defineEmits(['click']);

  // 是否显示所有项
  const isExpanded = ref(false);
  const containerHeight = ref(0);

  const brandData = computed(() => {
    return props.data.brand;
  });

  const disPlayChidren = computed(() => {
    // 默认显示两个
    if (props.data.shopList) {
      return props.data.shopList.slice(0, isExpanded.value ? props.data.shopList.length : 2);
    } else {
      return [];
    }
  });

  onMounted(() => {
    updateHeight();
  });

  // 计算当前高度
  function updateHeight() {
    nextTick(() => {
      const query = uni.createSelectorQuery().in(instance);
      query
        .selectAll('.item')
        .boundingClientRect((rects) => {
          console.log(rects, 'rects');
          if (!rects) return;
          if (isExpanded.value) {
            containerHeight.value = rects.reduce((sum, r) => sum + r.height, 0);
          } else {
            containerHeight.value = rects.slice(0, 2).reduce((sum, r) => sum + r.height, 0);
          }
        })
        .exec();
    });
  }

  function toggleExpand() {
    isExpanded.value = !isExpanded.value;
    updateHeight();
  }
  function clickHandler(id) {
    emits('click', id);
  }
</script>

<style lang="scss" scoped>
  .content {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }
  .brand-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12rpx;
      // padding-bottom: 24rpx;
      box-sizing: border-box;
      // border-bottom: 2rpx solid #d8d8d8;
      // margin-bottom: 22rpx;

      .left {
        font-weight: 600;
        font-size: 30rpx;
        color: #1e2737;
      }

      .radio {
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid #1e2737;
        border-radius: 50%;

        &.select {
          border: none;
          background-image: url('/static/icon/select.png');
          background-repeat: no-repeat;
          background-size: 40rpx 40rpx;
        }
      }
    }

    .interval {
      width: 100%;
      height: 2rpx;
      background-color: #d8d8d8;
      margin: 24rpx 0;
    }

    .shops {
      padding: 0 12rpx;
      box-sizing: border-box;
      transition: height 0.3s ease-out;
      overflow: hidden;

      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 25rpx;

        &:nth-last-child(1) {
          padding: 0;
        }

        .name {
          font-weight: 500;
          font-size: 26rpx;
          color: #1e2737;
        }
        .radio_wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40rpx;
          height: 40rpx;

          .radio {
            width: 30rpx;
            height: 30rpx;
            border: 2rpx solid #1e2737;
            border-radius: 50%;

            &.select {
              border: none;
              background-image: url('/static/icon/select.png');
              background-repeat: no-repeat;
              background-size: 30rpx 30rpx;
            }
          }
        }
      }
    }

    .toggle_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 20rpx;
      box-sizing: border-box;

      .text {
        font-size: 24rpx;
        color: #1e2737;
        margin-right: 10rpx;
      }

      .arrow {
        width: 9rpx;
        height: 16rpx;
        vertical-align: middle;
        transform: rotate(0);
        transition: all 0.3s;

        &.up {
          transform: rotate(-90deg);
        }

        &.down {
          transform: rotate(90deg);
        }
      }
    }
  }
</style>
